<template>
	<view :style="[{paddingTop:CustomBar+'px'},{paddingBottom:'100rpx'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">投诉商家</block>
		</cu-custom>
		<view class="name">
			实惠便利店
		</view>
		<view class="type">
			<view class="title">
				投诉类型
			</view>
			<view class="desc">
				<view class="active">发货问题</view>
				<view class="">承诺未履行</view>
				<view class="">骚扰他人</view>
				<view class="">其他</view>
				<view class="">其他</view>
			</view>
		</view>
		<view class="cause" @click="showLayer">
			<view class="">
				投诉原因
			</view>
			<view class="text-cut">
				请点击勾选
			</view>
			<tui-icon :name="'arrowright'" :size="'25'" :color="'#999'"></tui-icon>
		</view>
		<view class="under-stand">
			<view class="title">
				投诉说明
			</view>
			<textarea v-model="textarea" maxlength="200" placeholder-class="place" placeholder="请简要概述您需要投诉的问题并上传凭证" />
			<view class="upImage">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/04573f0716bde50ad3073a15a3d717b773635ade.jpeg" mode=""></image>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/04573f0716bde50ad3073a15a3d717b773635ade.jpeg" mode=""></image>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/04573f0716bde50ad3073a15a3d717b773635ade.jpeg" mode=""></image>
				<view class="">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/add.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="phone">
			<view class="title">
				联系方式
			</view>
			<input type="text" v-model="phone" placeholder-class="place" placeholder="请留下您任意一个联系方式(手机号,邮箱等)" />
		</view>
		
		<view class="btn">
			提交
		</view>
		
		<view class="layer" :style="isShow?'display:block;opacity: 1':'display:none;opacity: 0'" @click='hideLayer'></view>
		<view class="layer-content" :style='isShow?"bottom: 0":"bottom: -550rpx"'>
			<view class="tit">投诉原因</view>
			<view class="select phone" v-for="(item,index) in showList" :key="index" @tap.stop='select' :data-id="item.id">
				<text>{{item.label}}</text>
				<text :class="item.isTruth?'active':''"></text>
			</view>
			<view class="cancle bg-colorP" @click='hideLayer'>取消</view>
		</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/thorUI/icon.vue";
	export default {
		components:{tuiIcon},
		data() {
			return {
				CustomBar: this.CustomBar,
				textarea:'',
				phone:'',
				isShow:false,
				showList: [ 
					{
						label: '赠品诺言未履行',
						isTruth: false,
						id: 1
					},{
						label: '换货承诺未履行',
						isTruth: false,
						id: 2
					},{
						label: '物流承诺未履行',
						isTruth: false,
						id: 3
					} 
				],
			}
		},
		methods:{
			showLayer() {
				this.isShow = true
			},
			
			hideLayer() {
				this.isShow = false
			},
			
			select(e){
				var id = e.currentTarget.dataset.id
				this.showList.forEach(item=>{
					item.isTruth = false
					if(item.id == id){
						item.isTruth = true
					}
				})
			}
			
		}
	}
</script>

<style scoped>
	.name{
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		line-height: 100rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}
	
	.type{
		width: 100%;
		margin-top: 20rpx;
		background: #fff;
		padding: 0 22rpx;
	}
	
	.title{
		width: 100%;
		padding: 30rpx 0;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}
	
	.type .desc{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.type .desc>view{
		width: 338rpx;
		height: 60rpx;
		border-radius: 8rpx;
		border: solid 1rpx #cdcdcd;
		text-align: center;
		color: #666666;
		font-size: 28rpx;
		line-height: 60rpx;
		margin-bottom: 20rpx;
	}
	
	.type .desc .active{
		background-color: #f34930;
		color: #fff;
		border: solid 1rpx #f34930;
	}
	
	.cause{
		width: 100%;
		margin-top: 20rpx;
		background: #fff;
		padding: 0 22rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
	}
	
	.cause>view:nth-child(1){
		width: 150rpx; 
		color: #666666;
		font-size: 30rpx;
	}
	
	.cause>view:nth-child(2){
		color: #666666;
		font-size: 30rpx;
		flex: 1;
	}
	
	.under-stand{
		width: 100%;
		margin-top: 20rpx;
		background: #fff;
		padding: 0 22rpx 30rpx;
	}
	
	.under-stand textarea{
		width: 100%;
		height: 300rpx;
		background: #f2f2f2;
		color: #333;
		font-size: 26rpx;
		padding: 20rpx;
		border-radius: 8rpx;
	}
	
	.under-stand .upImage{
		width: 100%;
		height: 120rpx;
		display: flex;
		margin-top: 30rpx;
	}
	
	.under-stand .upImage>view{
		width: 120rpx;
		height: 120rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		border: solid 1rpx #cdcdcd;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.under-stand .upImage>view >image{
		width: 44rpx;
		height: 44rpx;
	}
	
	.under-stand .upImage>image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	
	.phone{
		width: 100%;
		margin-top: 10rpx;
		background: #fff;
		padding: 0 22rpx 30rpx;
	}
	
	.phone input{
		width: 100%;
		height: 88rpx;
		border-bottom: solid 1rpx #efefef;
		padding: 20rpx 0;
		color: #333;
		box-sizing: border-box; 
	}
	
	.btn{
		width: 100%;
		height: 88rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f34930;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
	}
	
	.layer {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		transition: all 0.2s;
	}
	
	.layer-content {
		z-index:9;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		/* height: 300rpx; */
		background-color: #fff;
		border-radius: 10rpx 10rpx 0px 0px;
		display: flex;
		flex-direction: column;
		transition: all 0.2s;
	}
	
	.layer-content .select{
		width: 100%;
		height: 90rpx;
	}
	
	.layer-content .select text:nth-child(1){
		color: #333;
		font-size: 28rpx;
	}
	
	.layer-content .select text:nth-child(2){
		width: 32rpx;
		height: 32rpx;
		background-color: #ffffff;
		border: solid 1rpx #efefef;
		border-radius: 100%;
	}
	
	.layer-content .select .active{
		border: solid 1rpx #F34930;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/red-choose.png') no-repeat;
		background-size: 100% 100%;
	}
	
	.layer-content .tit {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-bottom: solid 1rpx #f2f2f2;
		color: #333;
		font-size: 32rpx;
	}
	
	.layer-content .phone {
		/* flex: 1; */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.layer-content .cancle {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-top: solid 1rpx #f2f2f2;
	}
	
</style>

<style>
	.place{
		color: #999;
		font-size: 26rpx;
	}
</style>
